<template>
	<view class="container">
		<u-notice-bar mode="horizontal" :text="storeInfo.notice"></u-notice-bar>
		<!-- 头部 -->
		<view class="header">
			<image src="../../static/background.jpg" style="width:100%;position: absolute;z-index:-1;height:300rpx"></image>
			<view style="width:100%;height:20rpx"></view>
			<view class="template-view">
				<view class="store-top">
					<view class="store-name">
						<view>{{storeInfo.name}}</view>
						<!-- <view class="address">
							{{storeInfo.address}}
						</view> -->
						<view class="address">{{storeInfo.posAddress}}</view>
						<view class="tag-view" style="margin-top: 20rpx;">
							<u-tag :text="storeInfo.storeTime" plain size="mini" type="error"
								style="margin-right:20rpx"></u-tag>
			
							<u-tag text="带图反馈" plain size="mini"
								type="warning"></u-tag>
						</view>
					</view>
					<view>
						<image :src="storeInfo.mainImage" class="yzm-icon"></image>
					</view>
				</view>
				<!-- 选择器 -->
				<view class="store-top" style="margin-top: 20rpx;justify-content: space-between;">
					<u-icon name="share-fill" size="18" label="复制店名" labelSize="12" labelPos="bottom"
						labelColor="#d48938" @click="copy"></u-icon>
					<u-icon name=""></u-icon>
				</view>
			</view>
		</view>
		<view class="goods-list">
			<view style="position: relative;" id="mb">
			
				<u-tabs :list="tabs" lineWidth="20" lineHeight="4" lineColor="#ff983c"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 44px;" :current="tabCurr"
					@change="changeTab">
					<view slot="right" style="padding-left: 4px;" @tap="onShowClass">
						<u-icon name="list" size="21" bold></u-icon>
					</view>
				</u-tabs>
			
			</view>
			<!-- 可显示宠物上架、宠物零食、宠物穿搭 -->
			<view class="productList" v-if="tabCurr !== 4">
				<view class="guess-section">
					<view 
						v-for="(item, index) in dataList" :key="index"
						class="guess-item"
					>
						<view class="image-wrapper" @click="navToDetailPage(item)">
							<image v-if="checkImgType(item.mainImage)" :src="item.mainImage" mode="aspectFill"></image>
							<video v-if="!checkImgType(item.mainImage)" :src="item.mainImage" :autoplay="false" muted objectFit="fill" show-fullscreen-btn></video>
						</view>
						<view class="title clamp">{{item.name}}</view>
						<view class="price">￥{{item.price}}</view>
						<u-button type="warning" @click="toUpdate(item)" v-if="item.status === 4">修改信息</u-button>
						<u-button type="primary" @click="doTakeUp(item)" v-if="item.status === 2">上架</u-button>
					</view>
				</view>
			</view>
			<u-button class="add-goods-btn" v-if="tabCurr === 4" @click="$tab.navigateTo('/pages/goods/goods-add?store_id='+storeInfo.id)">新增好物</u-button>
			<!-- <nodata v-if="0 === 0"></nodata> -->
			
			<view style="width:100%;" :style="{'height':bottomHeight+'px'}"></view>
			<u-loadmore @click="toLoadData" :status="loadStatus" />
		</view>
	</view>
</template>

<script>
import {apiGetStoreDetail,apiGetOwnStoreDetail} from '@/api/store.js' 
import {apiGetProductList,apiEditProductTakeUp} from '@/api/product.js'
import { onLoad } from '../../uni_modules/uview-ui/libs/mixin/mixin'
import navigateType from '../marketer/marketer.js'
export default {
	data() {
		return {
			navigateType:0,
			distance:300,
			loadStatus:'loadmore',
			bottomHeight:'80px',
			storeInfo:{
				notice:''
			},
			whereCnt: -1,
			dataList: [],
			tabs:[],
			tabCurr:0,
			showClass:false,
			queryParams:{
				pageNum:1,
				pageSize:10,
				cate:0,
				status:4,
				storeId:0,
			}
		}
	},
	onLoad(options) {
		this.navigateType = options.navigateType
		this.initTabs()
		let title = this.navigateType == navigateType.innerNavigate?'个人店铺':'店铺信息'
		uni.setNavigationBarTitle({
			title:title
		})
		if(this.navigateType == navigateType.outerNavigate){
			this.doCustomerGetStoreData(options.storeId).then(()=>{
				this.doGetProductData()
			})
			
		}else if(this.navigateType == navigateType.innerNavigate){
			this.doStorerGetStoreData().then(()=>{
				this.doGetProductData()
			})
		}
		
		
	},
	// 滚动监听
	onPageScroll(e) {
	    this.handleScroll(e.scrollTop)
	},
	methods: {
		doTakeUp(item){
			let params = JSON.parse(JSON.stringify(item))
			apiEditProductTakeUp(params).then(res=>{
				this.$modal.msg("上架成功")
				this.tabCurr = 0
				this.refreshInitData()
				this.doGetProductData()
			})
		},
		checkImgType(file){
			//用文件名name后缀判断文件类型，可用size属性判断文件大小不能超过500k ， 前端直接判断的好处，免去服务器的压力。
			if (!/\.(jpg|jpeg|png|GIF|JPG|PNG)$/.test(file) ) {
				return false;
			}else{
				return true;
			}
		},
		refreshInitData(){
			this.distance = 300
			this.loadStatus = 'loadmore'
			this.queryParams.pageNum = 1
			this.queryParams.pageSize = 10
			this.queryParams.cate = null
			this.queryParams.status = 4
			this.dataList = []
			// this.queryParams.storeId = 0
		},
		initTabs(){
			if(this.navigateType == navigateType.innerNavigate){
				this.tabs = [{
					name:'在售宠物'
				},
				{
					name:'宠物零食'
				},
				{
					name:'宠物穿搭'
				},
				{
					name:'好物审核'
				},
				{
					name:'新增好物'
				},
				{
					name:'好物上架'
				}]
			}else if(this.navigateType == navigateType.outerNavigate){
				this.tabs = [{
					name:'在售宠物'
				},
				{
					name:'宠物零食'
				},
				{
					name:'宠物穿搭'
				}]
			}
		},
		// 下方tab的选择时触发
		changeTab(val){
			if(val.index === this.tabCurr){
				return
			}
			this.tabCurr = val.index
			this.refreshInitData()
			if(val.index === 1)// 宠物零食
			{
				this.queryParams.cate = 1
			}else if(val.index === 2){ //宠物穿搭
				this.queryParams.cate = 2
			}else if(val.index === 3){ // 好物审核
				this.queryParams.cate = null
				this.queryParams.status = 1
			}else if(val.index === 5){
				this.queryParams.cate = null
				this.queryParams.status = 2
			}
			this.doGetProductData()
		},
		onShowClass(){
			this.showClass = true
		},
		search(){
			this.showClass = false
		},
		restClass(){
			this.showClass = false
		},
		closeClass(){
			this.showClass = false
		},
		doStorerGetStoreData(){
			return new Promise((resolve,reject)=>{
				apiGetOwnStoreDetail().then(res=>{
					this.storeInfo = res.data
					this.queryParams.storeId = this.storeInfo.id
					resolve()
				})
			})
			
		},
		doCustomerGetStoreData(id){
			return new Promise((resolve,reject)=>{
				apiGetStoreDetail({store_id:id}).then(res=>{
					this.storeInfo = res.data
					this.queryParams.storeId = this.storeInfo.id
					resolve()
				})
			})
		},
		navToDetailPage(e){
			this.$tab.navigateTo("/pages/product/product?product_id="+e.id)
		},
		toUpdate(e){
			this.$tab.navigateTo("/pages/goods/goods-add?type=edit&product_id="+e.id+"&store_id="+this.storeInfo.id)
		},
		doGetProductData(){
			this.loadStatus = 'loading'
			let params = JSON.parse(JSON.stringify(this.queryParams))
			apiGetProductList(params).then(res=>{
				if(this.dataList === []){
					this.dataList = res.rows.map(item=>{
						item.id = item.Id
						return item
					})
				}else{
					this.dataList = [...this.dataList,...res.rows.map(item=>{
						item.id = item.Id
						return item
					})]
				}
				this.queryParams.pageNum += 1
				if(res.rows.length < this.queryParams.pageSize){
					this.loadStatus = 'nomore'
				}else{
					this.loadStatus = 'loadmore'
					this.distance += 500
				}
			})
		},
		handleScroll(e){
			if(this.loadStatus !== 'nomore' && e >= (this.distance)){
				this.doGetProductData()
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	page {
		background: #eee;
	}
	.container{
		width: 100%;
		height: 100%;
	}
	.add-goods-btn{
		position: absolute;
		top: 50%;
		left: 0;
	}
	.header{
		width: 100%;
		.template-view {
			// border: 1px solid black;
			width: 90%;
			margin: 0 auto;
			border-radius: 10px;
			padding: 5px;
			background: #fff;
			margin-bottom: 20rpx;
			.store-top {
				width: 96%;
				margin: 0 auto;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 20rpx;
				/* align-items: center; */
				.store-name {
					font-weight: bold;
					flex-grow: 1;
				}
				.yzm-icon {
					width: 150rpx;
					height: 150rpx;
					border-radius: 10rpx;
				}
				
				.address {
					color: #999;
					font-size: 26rpx;
					font-weight: 100;
					margin-top: 20rpx;
				}
				
				.tag-view {
					display: flex;
				}
			}
		}
	}
	.goods-list{
		.search-view {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 130rpx;
			line-height: 130rpx;
		
		}
		.productList{
			/* 猜你喜欢 */
			.guess-section{
				display:flex;
				flex-wrap:wrap;
				padding: 0 30upx;
				background: #fff;
				.guess-item{
					display:flex;
					flex-direction: column;
					width: 48%;
					padding-bottom: 40upx;
					&:nth-child(2n+1){
						margin-right: 4%;
					}
				}
				.image-wrapper{
					width: 100%;
					height: 330upx;
					border-radius: 3px;
					overflow: hidden;
					image{
						width: 100%;
						height: 100%;
						opacity: 1;
					}
				}
				.title{
					font-size: 32upx;
					color: #303133;
					line-height: 60upx;
				}
				.price{
					font-size: 32upx;
					color: #fa436a;
					line-height: 1;
				}
			}
		}
		
		.grid-text {
			font-size: 14px;
			color: #909399;
			padding: 10rpx 0 20rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}
		
		.class-view {
			position: absolute;
			width: 110%;
			top: 35px;
			left: -2%;
			background: #fff;
			z-index: 20;
		}
		
		.class-item {
			width: 90%;
			margin: 0 auto;
			border-bottom: 2rpx solid #eee;
			height: 70rpx;
			line-height: 70rpx;
			font-family: 黑体;
			color: #8f93ae;
			font-size: 30rpx;
		
		}
		
		.class_cur {
			font-weight: bold;
		}
		
		.merchant-view {
			margin-top: 20rpx;
			// height:700rpx;
		}
		
		.merchant-item {
			position: relative;
			width: 90%;
			padding: 30rpx 20rpx;
			margin: 0 auto;
			background: #fff;
			border-radius: 24rpx;
			display: flex;
			justify-content: space-around;
			margin-bottom: 20rpx;
		}
		
		.merchant-top {
			width: 96%;
			display: flex;
			padding-top: 20rpx;
			padding-bottom: 10rpx;
		}
		
		.merchant-left {
			width: 25%;
			text-align: center;
		}
		
		.merchant-header {
			width: 150rpx;
			height: 150rpx;
			// border-radius: 10rpx;
		}
		
		.merchant-right {
			width: 75%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}
		
		.merchant-title {
			display: flex;
			align-items: center;
			font-weight: bold;
			font-size: 32rpx;
		}
		
		.merchant-tag {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
		
		.merchant-addr {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			color: #888;
		}
		
		.merchant-info {
			display: flex;
		
		}
		
		.merchant-bottom {
			width: 94%;
			border-top: 2rpx solid #eee;
			height: 60rpx;
			line-height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0rpx;
			margin: 0 auto;
		}
		
		.merchant-bottom label {
			font-size: 28rpx;
			color: #888;
		}
		
		.template-view {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
		}
		
		.template-item {
			background-repeat: no-repeat;
			background-size: cover;
			width: 350rpx;
			height: 175rpx;
			border-radius: 14rpx;
		}
		
		.water-view {
			position: absolute;
			right: 50rpx;
			top: 30rpx;
			border: 10rpx solid red;
			border-radius: 50%;
			text-align: center;
			width: 100rpx;
			height: 100rpx;
			line-height: 100rpx;
			opacity: 0.3;
			color: red;
			font-weight: bold;
			transform: rotate(25deg);
		}
		
		.button-view {
			padding: 14rpx 30rpx;
			border-radius: 50rpx;
			font-size: 24rpx;
			position: absolute;
			right: 5rpx;
			bottom: 5rpx;
			background: #eee;
			color: #999;
		}
	}
	
	
</style>
